<template>
  <view class="uCenter">
    <image class="uCenterBgImage" :src="IMAGES.UCENTER_BG_01"></image>
    <view class="header">
      <!-- 用户基本信息 -->
      <view class="userinfo">
        <view class="avatar">
          <!-- svip -->
          <image v-if="STATE.user.userInfo.vip && STATE.user.userInfo.svip" class="vipIcon" :src="IMAGES.UCENTER_BOX_SVIP"></image>
          <!-- vip -->
          <image v-if="STATE.user.userInfo.vip && !STATE.user.userInfo.svip" class="vipIcon" :src="IMAGES.UCENTER_BOX_VIP"></image>
          <!-- novip -->
          <image v-if="!STATE.user.userInfo.vip" class="vipIcon" :src="IMAGES.UCENTER_BOX_NOVIP"></image>
          <image class="avatarImage" :src="STATE.user.userInfo.avatar"></image>
          <view v-if="STATE.user.userInfo.vip" class="vip"><text class="vipText">VIP</text></view>
          <view v-if="STATE.user.userInfo.svip && STATE.user.userInfo.vip" class="svip"><text class="svipText">SVIP</text></view>
          <view v-if="!STATE.user.userInfo.vip" class="novip"><text class="novipText">VIP</text></view>
        </view>
        <view class="userinfoExtra">
          <view class="nameinfo">
            <view class="left">
              <view class="name">{{ STATE.user.userInfo.nickName || "未设置昵称" }}</view>
            </view>
            <ly-icons size="20" color="#ffffff" type="compose" 
            @click="go('/pages/uCenter/editInfo')" />
          </view>
          <view class="id">
            <text>用户ID:{{ STATE.user.userInfo.id || "未知" }}</text>
          </view>
          <view class="id" v-if="STATE.user.userInfo.vip == 1">
            <text style="background-color: #08c;padding: 0 10rpx;">{{ vipExpire }}</text>
          </view>
        </view>
      </view>

      <!-- 用户财富 -->
      <view class="wealthCard">
        <!-- <view class="flex">
          <view class="flex-sub text-center padding-sm">
            <view class="number">620</view>
            <text>关注</text>
          </view>
          <view class="flex-sub text-center padding-sm">
            <view class="number">70</view>
            <text>粉丝</text>
          </view>
        </view> -->
        <view class="flex">
          <view class="flex-sub text-center padding-sm">
            <view class="label">鲜花</view>
            <text class="text text-orange" v-text="STATE.user.userInfo.flower"></text>
          </view>
          <view class="flex-sub text-center padding-sm">
            <view class="label">积分</view>
            <text class="text text-orange" v-text="STATE.user.userInfo.score"></text>
          </view>
        </view>
      </view>

      <!-- 菜单 -->
      <view class="menuCard">
        <uni-grid :column="3" :square="false" :showBorder="false">
          <uni-grid-item>
            <navigator url="/pages/common/task/index" open-type="switchTab" class="grid-item-box">
              <image :src="IMAGES.UCENTER_ICON_TASK_01" class="grid-item-box-image" mode="aspectFill" />
              <text class="grid-item-box-text">每日福利</text>
              <text class="grid-item-box-badge" v-if="STATE.user.taskReceiveingNum">{{ STATE.user.taskReceiveingNum }}</text>
            </navigator>
          </uni-grid-item>
          <uni-grid-item>
            <navigator url="/pages/credit/index" class="grid-item-box">
              <image :src="IMAGES.UCENTER_ICON_CREDIT_01" class="grid-item-box-image" mode="aspectFill" />
              <text class="grid-item-box-text">拿去花</text>
            </navigator>
          </uni-grid-item>
          <uni-grid-item>
            <navigator url="/pages/vip/index" class="grid-item-box">
              <image :src="IMAGES.UCENTER_ICON_VIP_01" class="grid-item-box-image" mode="aspectFill" />
              <text class="grid-item-box-text">加入会员</text>
            </navigator>
          </uni-grid-item>
          <uni-grid-item>
            <navigator url="/pages/uCenter/gameRecord" class="grid-item-box">
              <image :src="IMAGES.UCENTER_ICON_RECORD_01" class="grid-item-box-image" mode="aspectFill" />
              <text class="grid-item-box-text">游戏记录</text>
            </navigator>
          </uni-grid-item>
          <!-- <uni-grid-item>
            <navigator url="/pages/message/index" class="grid-item-box">
              <image :src="IMAGES.UCENTER_ICON_MESSAGE_01" class="grid-item-box-image" mode="aspectFill" />
              <text class="grid-item-box-text">消息中心</text>
              <text class="grid-item-box-badge" v-if="STATE.user.messageNotReadNum">
                {{ STATE.user.messageNotReadNum }}
              </text>
            </navigator>
          </uni-grid-item> -->
          <uni-grid-item>
            <view @click="onClickFeedback" class="grid-item-box">
              <image :src="IMAGES.UCENTER_ICON_FEEDBACK_01" class="grid-item-box-image" mode="aspectFill" />
              <text class="grid-item-box-text">问题反馈</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
    </view>
  </view>
</template>

<script>
import { IMAGES } from "@/config/resources";
import uniApp from "@/utils/uni-app";
import { uniGrid, uniGridItem } from "@dcloudio/uni-ui";
import lyIcons from "@/lyui/ly-icons/ly-icons";
import tabMixin from "../tabMixin";
export default {
  mixins: [tabMixin],
  components: { lyIcons, uniGrid, uniGridItem },
  data() {
    return {};
  },
  computed: {
    IMAGES: () => IMAGES,
    vipExpire() {
      let vipEnd = this.$store.state.user.userInfo.vipEnd;
      let now = parseInt(Date.now() / 1000);
      if (vipEnd < now) {
        return "";
      } else {
        let t = (vipEnd - now) / (24 * 60 * 60);
        if (t > 1) {
          return Math.floor(t) + "天后会员到期";
        } else {
          return "今日会员到期";
        }
      }
    }
  },
  onShow() {
    this.init();
  },
  methods: {
    init() {
      return this.$store.dispatch("user/getUserInfo");
    },
    onClickFeedback() {
      uni.navigateTo({ url: "/pages/uCenter/feedback" });
    }
  },
  onNavigationBarButtonTap(e) {
    if (e.index === 0) {
      this.go("/pages/uCenter/set/index");
    }
  },
  onPullDownRefresh() {
    this.init()
      .then(_ => {
        console.warn({ _ });
        uni.stopPullDownRefresh();
      })
      .catch(e => {
        console.warn({ e });
        uniApp.alert(e.message || e.data.msg);
        uni.stopPullDownRefresh();
      });
  }
};
</script>

<style scoped lang="scss">
.uCenter {
  overflow: hidden;
}
.uCenterBgImage {
  width: 750upx;
  position: absolute;
  left: 0;
  right: 0;
}
.header {
  margin-top: 120upx;
  position: relative;
  width: 100%;
  overflow: hidden;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// 用户基本信息
.userinfo {
  width: 88%;
  margin-top: 20upx;
  display: flex;
  align-items: center;
}
.vipIcon {
  position: absolute;
  width: 129upx;
  height: 162upx;
  left: 0;
  bottom: 0upx;
  z-index: 1;
}
.avatar {
  position: relative;
  height: 129upx;
  width: 162upx;
}
.avatarImage {
  height: 129upx;
  width: 129upx;
  border-radius: 129upx;
  padding: 5upx;
}
.noVip {
  height: 129upx;
  width: 129upx;
  border: 5upx solid #eeeeee;
  overflow: hidden;
  border-radius: 129upx;
  padding: 0;
}
.avatarVip {
  border-color: #ffea00;
}
.avatarSvip {
  border-color: #ff3e75;
}
.vip,
.svip,
.novip {
  position: absolute;
  padding: 0 10upx;
  bottom: -20upx;
  left: -20upx;
  right: 0;
  z-index: 1;
  text-align: center;
}
.vipText,
.svipText,
.novipText {
  border-radius: 2500upx;
  padding: 0 12upx;
  font-size: 20upx;
  font-style: italic;
}
.vipText {
  background-color: #ffea00;
  color: #ff0000;
}
.svipText {
  background-color: #ff3e75;
  color: #ffffff;
}
.novipText {
  background-color: #7f7f7f;
  color: #ffffff;
}
.userinfoExtra {
  width: calc(100% - 100upx);
  color: #ffffff;
  .nameinfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .name {
        font-size: 34upx;
      }
      .vip {
        margin-left: 10upx;
        width: 72upx;
        height: 34upx;
        image {
          height: 100%;
          width: 100%;
        }
      }
    }
    .cuIcon-edit {
      font-size: 36upx;
    }
  }
  .id {
    font-size: 28upx;
  }
}
// 用户财务卡片
.wealthCard {
  background-color: #ffffff;
  border-radius: 8upx;
  margin-top: 80upx;
  padding: 30upx 0;
  width: 88%;
}
.number {
  color: #fb7299;
  font-size: 42upx;
  font-weight: 700;
}
// .flex {
//   &:last-child {
//     .flex-sub {
//       display: flex;
//       justify-content: center;
//       align-items: center;
//       font-size: 28upx;
//       > .label {
//         width: 80upx;
//       }
//       > .text {
//         font-size: 40upx;
//         font-weight: 700;
//       }
//     }
//   }
// }

.menuCard {
  background-color: #ffffff;
  border-radius: 8upx;
  margin-top: 50upx;
  width: 88%;
}
.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20rpx 0;
}
.grid-item-box-image {
  width: 90rpx;
  height: 90rpx;
}
.grid-item-box-text {
  color: #a1a1a1;
  font-size: 24upx;
}
.grid-item-box-badge {
  position: absolute;
  padding: 0 10upx;
  border-radius: 2500rpx;
  right: 40rpx;
  top: 20upx;
  background-color: #ff0000;
  color: #ffffff;
  font-size: 20upx;
}
</style>
